<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = utf-8>
    <title>Websocket communication with Grbl</title>
  </head>	
  <body>
    <section id = "wrapper">
      <header><h1>Grbl Websocket Chat</h1></header>
      <style>
           #chat { width: 97%; }
           .message:before { content: ' '; color: #bbb; font-size: 14px; }			
           #log {
              overflow: auto;
              max-height: 300px;
              list-style: none;
              padding: 0;
           }		
           #log li {
              font: normal 12px "Courier New", Courier, sans-serif;
              border-top: 1px solid #ccc;
              margin: 0;
              padding: 10px 0;
           }			
           body {
              font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
              background: rgb(237, 237, 236);
              margin: 0;
              margin-top: 40px;
              padding: 0;
           }		
           section, header {
              display: block;
           }
           #wrapper {
              width: 600px;
              margin: 0 auto;
              background: #fff;
              border-radius: 10px;
              border-top: 1px solid #fff;
              padding-bottom: 16px;
           }
           h1 {
              padding-top: 10px;
           }
           h2 {
              font-size: 100%;
              font-style: italic;
           }
           header, article > * {
              margin: 20px;
           }
           #status {
              padding: 5px;
              color: #fff;
              background: #ccc;
           }
           #status.fail {
              background: #c00;
           }
           #status.success {
              background: #0c0;
           }
           #status.offline {
              background: #c00;
           }
           #status.online {
              background: #0c0;
           }
           #html5badge {
              margin-left: -30px;
              border: 0;
           }
           #html5badge img {
              border: 0;
           }
        </style>
        <article>
          <form onsubmit = "addMessage(); return false;">
            <input type = "text" id = "chat" placeholder = "type and press enter to send command to Grbl"/>
          </form>
          <p id = "status">Not connected</p>
          <ul id = "log"></ul>
        </article>     
        <script>
           log = document.getElementById("log");
           chat = document.getElementById("chat");
           form = chat.form;
           state = document.getElementById("status");
           if (window.WebSocket === undefined) {
              state.innerHTML = "sockets not supported";
              state.className = "fail";
           }else {
              if (typeof String.prototype.startsWith != "function") {
                 String.prototype.startsWith = function (str) {
                    return this.indexOf(str) == 0;
                 };
              }		
              window.addEventListener("load", onLoad, false);
           }
                
           function onLoad() {
              var wsUri = "ws://10.0.0.70:80";
              websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) { onOpen(evt) };
              websocket.onclose = function(evt) { onClose(evt) };
              websocket.onmessage = function(evt) { onMessage(evt) };
              websocket.onerror = function(evt) { onError(evt) };
           }
                
           function onOpen(evt) {
              state.className = "success";
              state.innerHTML = "Connected to Grbl";
              websocket.send("$I\n");
           }
                
           function onClose(evt) {
              state.className = "fail";
              state.innerHTML = "Not connected";
           }
            function safe_tags(str) {
                return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') ;
            }
           function onMessage(evt) {
                log.innerHTML = '<li class = "message">' + safe_tags(evt.data) + "</li>" + log.innerHTML;
           }
                
           function onError(evt) {
              state.className = "fail";
              state.innerHTML = "Communication error";
           }
                
           function addMessage() {
              var message = chat.value;
              chat.value = "";
              websocket.send(message + "\n");
           }	
      </script>
    </section>
  </body>
</html>
